<template>
  <div id="container">

  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { getLocationByIp} from "@/api/map/amap.js";


export default {
  name: "AmapShow",
  data() {
    return {
      ipAddr:[]
    }
  },
  created() {
    this.getLocationByIp();
  },
  mounted() {
     this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    getLocationByIp(){
      getLocationByIp().then(res => {
        console.log(res.data.rectangle,"getLocationByIp");
        let addrArray =  res.data.rectangle.split(";");
        this.ipAddr = addrArray[0].split(",");
      })
    },
    initAMap() {
      AMapLoader.load({
        key: "5c3dade61d6151605ae2c127b7798095", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: this.ipAddr, // 初始化地图中心点位置
          });

          // 创建点覆盖物
          var marker = new AMap.Marker({
            position: new AMap.LngLat(this.ipAddr[0], this.ipAddr[1]),
            icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
            offset: new AMap.Pixel(-13, -30)
          });
          this.map.add(marker);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  }
}


</script>




<style scoped>
html,
body,
#container {
  width: 100%;
  height: 800px;
}
</style>
